<template>
  <div class="home">
    <Scene :dataList="dataList"></Scene>
    <BigScreen :dataInfo="dataInfo" :dataList="dataList"></BigScreen>
  </div>
</template>

<script setup>
// @ is an alias to /src
import Scene from "@/components/Scene.vue";
import BigScreen from "@/components/BigScreen.vue";
import { onMounted, reactive, ref } from "vue";
import { getCityInfo, getCityList } from "@/api/api";
import gsap from "gsap";

const dataInfo = reactive({
  iot: { number: 0 },
  event: { number: 0 },
  power: { number: 0 },
  test: { number: 0 },
});
const dataList = ref([]);

onMounted(async () => {
  changeInfo();
  getList();
  setInterval(() => {
    changeInfo();
    getList();
  }, 5000);
});

const changeInfo = async () => {
  let res = await getCityInfo();
  for (let key in dataInfo) {
    dataInfo[key].name = res.data.data[key].name;
    dataInfo[key].unit = res.data.data[key].unit;
    gsap.to(dataInfo[key], {
      number: res.data.data[key].number,
      duration: 1,
    });
  }
};

const getList = async () => {
  let res = await getCityList();
  dataList.value = res.data.list;
};
</script>
